<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta charset="utf-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
	<link href="../css/styles.css" rel="stylesheet" />
	<style>
		::cue(.customstyle) {
			color: red;
			font: bold;
		}
		
		.cue .customstyle {
			color: red;
			font: bold;
		}
	</style>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script src="../js-webshim/minified/extras/modernizr-custom.js"></script>
	<script src="../js-webshim/minified/polyfiller.js"></script>
	<!--
		<script src="../../src/polyfiller.js"></script> 
		<script>
			$.webshims.setOptions({
				mediaelement: {
					playerPath: '../../swfs/jaris/bin/JarisFLVPlayer.swf'
				}
			});
			$.webshims.debug = 'noCombo';
		</script>
	-->
	<script>
		$.webshims.polyfill();
		
		
		$(function(){
			
			
			//If you want to build a simple player the following code can help you
			$('div.player').each(function(){
				var player = this;
				var getSetCurrentTime = createGetSetHandler(
					function(){
						$('input.time-slider', player).prop( 'value',  $.prop(this, 'currentTime'));
					},
					function(){
						try {
							$('video, audio', player).prop('currentTime', $.prop(this, 'value'));
						} catch(er){}
					}
				);
				var getSetVolume = createGetSetHandler(
					function(){
						$('input.volume-slider', player).prop( 'value',  $.prop(this, 'volume'));
						
					},
					function(){
						$('video, audio', player).prop('volume', $.prop(this, 'value'));
					}
				);
				$('video, audio', this)
					.bind('durationchange updateMediaState', function(){
						var duration = $.prop(this, 'duration');
						if(!duration){return;}
						$('input.time-slider', player).prop({
							'max': duration,
							disabled: false
						});
						$('span.duration', player).text(duration);
					})
					.bind('progress updateMediaState', function(){
						var buffered = $.prop(this, 'buffered');
						if(!buffered || !buffered.length){return;}
						buffered = getActiveTimeRange( buffered, $.prop(this, 'currentTime') );
						$('span.progress', player).text( buffered[2] );
					})
					.bind('timeupdate', function(){
						$('span.current-time', player).text( $.prop(this, 'currentTime') );
					})
					.bind('timeupdate', getSetCurrentTime.get)
					.bind('emptied', function(){
						$('input.time-slider', player).prop('disabled', true);
						$('span.duration', player).text('--');
						$('span.current-time', player).text( 0 );
						$('span.network-state', player).text( 0 );
						$('span.ready-state', player).text( 0 );
						$('span.paused-state', player).text( $.prop(this, 'paused') );
						$('span.height-width', player).text( '-/-' );
						$('span.progress', player).text('0');
					})
					.bind('waiting playing loadedmetadata updateMediaState', function(){
						$('span.network-state', player).text( $.prop(this, 'networkState') );
						$('span.ready-state', player).text( $.prop(this, 'readyState') );
					})
					.bind('play pause', function(){
						$('span.paused-state', player).text( $.prop(this, 'paused') );
					})
					.bind('volumechange', function(){
						var muted = $.prop(this, 'muted');
						$('span.muted-state', player).text( muted );
						$('input.muted', player).prop('checked', muted);
						$('span.volume', player).text( $.prop(this, 'volume') );
					})
					.bind('volumechange', getSetVolume.get)
					.bind('play pause', function(){
						$('span.paused-state', player).text( $.prop(this, 'paused') );
					})
					.bind('loadedmetadata updateMediaState', function(){
						$('span.height-width', player).text( $.prop(this, 'videoWidth') +'/'+ $.prop(this, 'videoHeight') );
					})
					.each(function(){
						if($.prop(this, 'readyState') > $.prop(this, 'HAVE_NOTHING')){
							$(this).triggerHandler('updateMediaState');
						}
					})
				;
				
				$('input.time-slider', player)
					.bind('input', getSetCurrentTime.set)
					.prop('value', 0)
				;
				$('input.volume-slider', player).bind('input', getSetVolume.set);
				
				$('input.play', player).bind('click', function(){
					$('video, audio', player).callProp('play');
				});
				$('input.pause', player).bind('click', function(){
					$('video, audio', player).callProp('pause');
				});
				$('input.muted', player).bind('click updatemuted', function(){
					$('video, audio', player).prop('muted', $.prop(this, 'checked'));
				}).triggerHandler('updatemuted'); 
				$('input.controls', player).bind('click updatecontrols', function(){
					$('video, audio', player).prop('controls', $.prop(this, 'checked'));
				}).prop('checked', true);
				
				$('input.texttrack', player).bind('click updatecontrols', function(){
					$('track', player).prop('track').mode = $.prop(this, 'checked') ? 'showing' : 'disabled';
				}).prop('checked', true); 
				
				$('select.load-media', player).bind('change', function(){
					var srces = $('option:selected', this).data('src');
					if(srces){
						//the following code can be also replaced by the following line
						//$('video, audio', player).loadMediaSrc(srces).play();
						
						$('video, audio', player)
							.removeAttr('src')
							.find('source')
							.remove()
							.end()
							.each(function(){
								var mediaElement = this;
								if(typeof srces == 'string'){
									srces = [srces];
								}
								$.each(srces, function(i, src){
									
									if(typeof src == 'string'){
										src = {src: src};
									}
									$(document.createElement('source')).attr(src).appendTo(mediaElement);
								});
							})
							.callProp('load')
						;
						$('video, audio', player).callProp('play');
					}
				}).prop('selectedIndex', 0);
			});
			
			//helper for createing throttled get/set functions (good to create time/volume-slider, which are used as getter and setter)
			function createGetSetHandler(get, set){
				var throttleTimer;
				var blockedTimer;
				var blocked;
				return {
					get: function(){
						if(blocked){return;}
						return get.apply(this, arguments);
					},
					set: function(){
						clearTimeout(throttleTimer);
						clearTimeout(blockedTimer);
						
						var that = this;
						var args = arguments;
						blocked = true;
						throttleTimer = setTimeout(function(){
							set.apply(that, args);
							blockedTimer = setTimeout(function(){
								blocked = false;
							}, 30);
						}, 0);
					}
				};
			}
			
			function getActiveTimeRange(range, time){
				var len = range.length;
				var index = -1;
				var start = 0;
				var end = 0;
				for(var i = 0; i < len; i++){
					if(time >= (start = range.start(i)) && time <= (end = range.end(i))){
						index = i;
						break;
					}
				}
				return [index, start, end];
			}
			
			//implement callProp abstraction for webshims (extendNative = false)
			if(!$.fn.callProp){
				$.fn.callProp = function(prop, args){
					var ret;
					var fn = this.prop(prop);
					if(!args){
						args = []; 
					}
					if (fn && fn.apply) {
						ret = fn.apply(this[0], args);
					}
					return (ret !== undefined) ? ret : this;
				};
			}
			
		});
	</script>
	<script src="../demo-js/demo.js"></script>
	<title>HTML5 mediaelements audio, video and track : webshims lib - the polyfilling capability based loading JS library</title>
</head>

<body>
		<header>
			<hgroup>
				<h1>Webshims Lib</h1>
				<h2>Polyfill only the incapable browsers</h2>
			</hgroup>
			<nav>
				<ul>
					<li><a href="../index.html">home</a></li>
				</ul>
			</nav>
		</header>
		<div class="main">
		<nav>
			<ul>
				<li><a href="shiv.html">HTML5 shiv and innerShiv</a></li>
				<li><a href="es5.html">ES5/JavaScript 1.8.5</a></li>
				<li><a href="webforms.html">constraint validation and input widgets</a></li>
				<li><a href="canvas.html">canvas</a></li>
				<li><strong>mediaelement</strong></li>
				<li><a href="json-storage.html">storage and JSON</a></li>
				<li><a href="geolocation.html">geolocation API</a></li>
				<li><a href="details.html">details &amp; summary</a></li>
			</ul>
		</nav>
		<div class="main-box">
		<section>
			<hgroup>
				<h2>HTML5 audio, video and track elements</h2>
				<h3>Demo/About/Documentation audio and video elements</h3>
			</hgroup>
			<p>The <code>mediaelement</code> feature implements the audio, video and source elements including their API and enables playing mp4, mp3, flv, fla etc. media files and playing rtmp streams in incapable browsers.</p>
			<section>
				<h3>Implemented/fixed elements, attributes, properties, methods, events</h3>
				<ul>
					<li><strong>elements:</strong> <a href="http://www.w3.org/TR/html5/video.html#video">video</a>, <a href="http://www.w3.org/TR/html5/video.html#audio">audio</a>, <a href="http://www.w3.org/TR/html5/video.html#the-source-element">source</a></li>
					<li><strong>attributes and IDL/properties</strong>: <a href="http://www.w3.org/TR/html5/video.html#attr-media-controls">controls</a>, <a href="http://www.w3.org/TR/html5/video.html#attr-media-loop">loop</a>, <a href="http://www.w3.org/TR/html5/video.html#attr-media-autoplay">autoplay</a>, <a href="http://www.w3.org/TR/html5/video.html#attr-source-src">src</a>, <a href="http://www.w3.org/TR/html5/embedded-content-0.html#dom-source-media">media</a>, <a href="http://www.w3.org/TR/html5/embedded-content-0.html#dom-source-media">type</a></li>
					<li><strong>properties/IDLs</strong>: <a href="http://www.w3.org/TR/html5/video.html#dom-media-paused">paused</a>, <a href="http://www.w3.org/TR/html5/video.html#dom-media-ended">ended</a>, <a href="http://www.w3.org/TR/html5/video.html#dom-media-muted">muted</a>, <a href="http://www.w3.org/TR/html5/video.html#dom-media-volume">volume</a>, <a href="http://www.w3.org/TR/html5/video.html#dom-media-currenttime">currentTime</a>, <a href="http://www.w3.org/TR/html5/video.html#dom-media-duration">duration</a>, <a href="http://www.w3.org/TR/html5/video.html#dom-media-buffered">buffered</a><sup>1</sup>, <a href="http://www.w3.org/TR/html5/video.html#dom-media-currentsrc">currentSrc</a>, <a href="http://www.w3.org/TR/html5/video.html#dom-media-readystate">readyState</a>, <a href="http://www.w3.org/TR/html5/video.html#dom-media-networkstate">networkState</a>, <a href="http://www.w3.org/TR/html5/video.html#dom-video-videoheight">videoHeight</a><sup>2</sup>, <a href="http://www.w3.org/TR/html5/video.html#dom-video-videowidth">videoWidth</a><sup>2</sup></li>
					<li><strong>methods</strong>: <a href="http://www.w3.org/TR/html5/video.html#dom-media-play">play</a>, <a href="http://www.w3.org/TR/html5/video.html#dom-media-pause">pause</a>, <a href="http://www.w3.org/TR/html5/video.html#dom-media-load">load</a> (mediaLoad<sup>3</sup>), <a href="http://www.w3.org/TR/html5/video.html#dom-navigator-canplaytype">canPlayType</a> <sup>4</sup> </li>
					<li><strong>events</strong>: <a href="http://www.w3.org/TR/html5/video.html#event-media-loadedmetadata">loadedmetadata</a>, <a href="http://www.w3.org/TR/html5/video.html#event-media-play">play</a>, <a href="http://www.w3.org/TR/html5/video.html#event-media-pause">pause</a>, <a href="http://www.w3.org/TR/html5/video.html#event-media-playing">playing</a>, <a href="http://www.w3.org/TR/html5/video.html#event-media-canplay">canplay</a>, <a href="http://www.w3.org/TR/html5/video.html#event-media-ended">ended</a>, <a href="http://www.w3.org/TR/html5/video.html#event-media-waiting">waiting</a>, <a href="http://www.w3.org/TR/html5/video.html#event-media-timeupdate">timeupdate</a>, <a href="http://www.w3.org/TR/html5/video.html#event-media-progress">progress</a>, <a href="http://www.w3.org/TR/html5/video.html#event-media-emptied">emptied</a>, <a href="http://www.w3.org/TR/html5/video.html#event-media-volumechange">volumechange</a>, <a href="http://www.w3.org/TR/html5/video.html#event-media-durationchange">durationchange</a></li>
				</ul>
				<ul>
					<li><small>1.buffered is a little bit buggy with youtube videos.</small></li>
					<li><small>2.videoHeight/videoWidth not supported with youtube videos.</small></li>
					<li><small>3. mediaLoad is the jQuery plugin method, which corresponds to the native load method (Webshims lib does not override jQuery's own load-method), ( $('video')[0].load() === $('video:first').mediaLoad() ).</small></li>
					<li><small>4. canPlayType returns "maybe" if native player can't play, but Flash can and is installed. (i.e.: $('video').canPlayType('video/flv') might return "mabe")</small></li>
				</ul>
				
				<h3>Options for the <code>mediaelement</code> feature</h3>
				
				<ul>
					<li><strong>preferFlash</strong> (false): If preferFlash is set to true the mediaelements will be replaced by flash, if flash is available. Otherwise only, if mediaelements aren't supported or the current audio/video container/codec isn't supported by the browser.</li>
					<li><strong>vars</strong> (Flahsvars Object): Object with default flashvars to configure <a href="http://jarisflvplayer.org/docs/">Jarisplayer</a>. This general configuration can be changed by using a data-vars attribute, too.</li>
					<li><strong>changeSWF</strong> (Manipulation function): Callback function to also modify the flashvars object for Jarisplayer.</li>
				</ul>
				
				<h3>Extensions/Abstractions to the standard</h3>
				<ul>
					<li><strong>loadMediaSrc</strong> (source [, poster]) (jQuery plugin): Removes current audio/video sources adds new source[s] and calls the load method (mediaLoad).</li>
				</ul>
				
<code class="block">
//simple video
$("video.my-video").loadMediaSrc("my-video.mp4");
//or video with type
$("video.my-video").loadMediaSrc({src: "my-video.mp4", type: "video/mp4"});
or multiple video sources and new poster
$("video.my-video").loadMediaSrc(
	[
		{src: "my-video.mp4", type: "video/mp4"}, 
		"my-video.ogg"
	], 
	"my-poster.jpg"
);
</code>			<h2>Track Element support</h2>
				<p>The <code>track</code> feature implements the track element width a WebVTT parser and the corresponding DOM- and JS-APIs.</p>
				<h3>Implemented/fixed elements, attributes, properties, methods, events</h3>
				<ul>
					<li><strong>elements:</strong> <a href="http://www.w3.org/TR/html5/the-track-element.html">track</a></li>
					<li><strong>attributes and IDL/properties</strong>: <a href="http://www.w3.org/TR/html5/the-track-element.html#dom-track-kind">kind</a>, <a href="http://www.w3.org/TR/html5/the-track-element.html#attr-track-src">src</a>, <a href="http://www.w3.org/TR/html5/the-track-element.html#attr-track-srclang">srclang</a>, <a href="http://www.w3.org/TR/html5/the-track-element.html#attr-track-label">label</a>, <a href="http://www.w3.org/TR/html5/the-track-element.html#attr-track-default">default</a></li>
					<li><strong>properties/IDLs</strong>: <a href="http://www.w3.org/TR/html5/the-track-element.html#dom-track-readystate">readystate</a>, <a href="http://www.w3.org/TR/html5/the-track-element.html#dom-track-track">track</a>, <a href="http://www.w3.org/TR/html5/media-elements.html#dom-media-texttracks">textTracks</a></li>
					<li><strong>methods</strong>: <a href="http://www.w3.org/TR/html5/media-elements.html#dom-media-addtexttrack">addTextTrack</a></li>
					<li><strong>events</strong>: <a href="http://www.w3.org/TR/html5/media-elements.html#handler-texttrack-oncuechange">cuechange</a>, <a href="http://www.w3.org/TR/html5/media-elements.html#handler-texttrackcue-onenter">enter</a>, <a href="http://www.w3.org/TR/html5/media-elements.html#handler-texttrackcue-onexit">exit</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#handler-texttracklist-onaddtrack">addtrack</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#handler-texttracklist-onremovetrack">removetrack</a></li>
					<li><strong>corresponding interfaces</strong>: <a href="http://dev.w3.org/html5/spec/media-elements.html#texttracklist">TextTrackList<sup>1</sup></a>, <a href="http://dev.w3.org/html5/spec/media-elements.html#texttrack">TextTrack<sup>2</sup></a>, <a href="http://dev.w3.org/html5/spec/media-elements.html#texttrackcuelist">TextTrackCueList</a>, <a href="http://dev.w3.org/html5/spec/media-elements.html#texttrackcue">TextTrackCue</a> including the <a href="http://dev.w3.org/html5/spec/media-elements.html#dom-texttrackcue">TrextTrackCue constructor</a></li>
				</ul>
				<ul>
					<li><small>1. Use additional [] to bind events to Array-like objects (<code>$([ $('video').prop('textTracks') ]).on('addtrack', function(e){console.log('track was added');});</code>)</small></li>
					<li><small>2. Use shimActiveCues instead of activeCues property. In case override is set to true or all track supporting browsers (currently only Chrome 23) won't load the flash- or the youtube iframe fallback  for video/audio playback, activeCues can be also used savely.</small></li>
				</ul>
				
				<h3>Options for the <code>track</code> feature</h3>
				
				<ul>
					<li><strong>override</strong> (false): Overrides native track implementation. In case you have to deal with some cross-browser issues with native implementation.</li>
					<li><strong>positionDisplay</strong> (true): Positions the cue display via JavaScript.</li>
				</ul>
			</section>
			<section>
				<h3>Simple Demo</h3>
				<h4>Video example</h4>
				<div class="player">
					<div class="mediaplayer videoplayer">
						<video controls preload="none" poster="http://corrupt-system.de/assets/media/sintel/sintel-trailer.jpg" style="width: 630px; height: 356px;">
							<source src="http://corrupt-system.de/assets/media/sintel/sintel-trailer.m4v" type="video/mp4" />
							<source src="http://corrupt-system.de/assets/media/sintel/sintel-trailer.webm" type="video/webm" />
							<track src="subtitle.vtt" srclang="en" label="some description" kind="subtitles" default />
							<p>You need a modern Browser or install the Flash Plugin or simply download the video (<a href="http://corrupt-system.de/assets/media/sintel/sintel-trailer.m4v">mp4</a>, <a href="http://corrupt-system.de/assets/media/sintel/sintel-trailer.webm">webm</a>)</p>
						</video>
					</div>
					<table>
						<thead>
							<tr>
								<th>property</th>
								<th>value/control</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<th>currentTime</th>
								<td><span class="current-time"></span></td>
							</tr>
							<tr>
								<th>duration</th>
								<td><span class="duration"></span></td>
							</tr>
							<tr>
								<th>progress</th>
								<td><span class="progress">0</span></td>
							</tr>
							
							<tr>
								<th>paused-state</th>
								<td><span class="paused-state">true</span></td>
							</tr>
							<tr>
								<th>muted-state</th>
								<td><span class="muted-state">false</span></td>
							</tr>
							<tr>
								<th>volume</th>
								<td><span class="volume">1</span></td>
							</tr>
							
							<tr>
								<th>videoWidth/videoHeight</th>
								<td><span class="height-width">-/-</span></td>
							</tr>
							
							<tr>
								<th>networkState</th>
								<td><span class="network-state"></span></td>
							</tr>
							<tr>
								<th>readyState</th>
								<td><span class="ready-state"></span></td>
							</tr>
							<tr>
								<th>controls</th>
								<td><input class="controls" type="checkbox" checked /></td>
							</tr>
							<tr>
								<th>currentTime</th>
								<td><input class="time-slider" type="range" disabled value="0" step="0.01" /></td>
							</tr>
							<tr>
								<th>play</th>
								<td><input value="play" type="button" class="play" /></td>
							</tr>
							<tr>
								<th>pause</th>
								<td><input value="pause" type="button" class="pause" /></td>
							</tr>
							<tr>
								<th>muted</th>
								<td><input class="muted" type="checkbox" /></td>
							</tr>
							<tr>
								<th>volume</th>
								<td><input class="volume-slider" type="range"  value="1" max="1" step="0.01" /></td>
							</tr>
							<tr>
								<th>textTrack</th>
								<td><input class="texttrack" type="checkbox" /></td>
							</tr>
							<tr>
								<th>loadMediaSrc</th>
								<td>
									<select class="load-media">
										<option data-src='[{"src": "http://corrupt-system.de/assets/media/sintel/sintel-trailer.m4v", "type": "video/mp4"}, {"src": "http://corrupt-system.de/assets/media/sintel/sintel-trailer.webm", "type": "video/webm"}]'>Sintel Trailer</option>
										<option data-src='[{"src": "http://corrupt-system.de/assets/media/bigbugbunny/bbb_trailer.m4v", "type": "video/mp4"}, {"src": "http://corrupt-system.de/assets/media/bigbugbunny/bbb_trailer.ogg", "type": "video/ogg"}]'>BigBugBunny</option>
										<option data-src='[{"src": "http://cdn.yayquery.com/ep/23/yayquery_23.mp4", "type": "video/mp4"}, {"src": "http://cdn.yayquery.com/ep/23/yayquery_23.ogv", "type": "video/ogg"}]'>yayQuery - Episode 23 | When Things Are Things</option>
										<option data-src="http://www.youtube.com/watch?v=siOHh0uzcuY">Youtube: Introduction to HTML 5</option>
										
									</select>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
				<h4>Audio example using mp3 only</h4>
				<div class="player">
					<div class="mediaplayer audioplayer">
						<audio controls preload="none" style="width: 400px; height: 45px;">
							<source src="http://media.libsyn.com/media/sitepoint/sitepointpodcast044.mp3" type="audio/mpeg" />
							<p>You need a modern Browser or install the Flash Plugin</p>
						</audio>
					</div>
					<table>
						<thead>
							<tr>
								<th>property</th>
								<th>value/control</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<th>currentTime</th>
								<td><span class="current-time"></span></td>
							</tr>
							<tr>
								<th>duration</th>
								<td><span class="duration"></span></td>
							</tr>
							<tr>
								<th>progress</th>
								<td><span class="progress">0</span></td>
							</tr>
							
							<tr>
								<th>paused-state</th>
								<td><span class="paused-state">true</span></td>
							</tr>
							<tr>
								<th>muted-state</th>
								<td><span class="muted-state">false</span></td>
							</tr>
							<tr>
								<th>volume</th>
								<td><span class="volume">1</span></td>
							</tr>
														
							<tr>
								<th>networkState</th>
								<td><span class="network-state"></span></td>
							</tr>
							<tr>
								<th>readyState</th>
								<td><span class="ready-state"></span></td>
							</tr>
							<tr>
								<th>controls</th>
								<td><input class="controls" type="checkbox" checked /></td>
							</tr>
							<tr>
								<th>currentTime</th>
								<td><input class="time-slider" type="range" disabled value="0" step="0.01" /></td>
							</tr>
							<tr>
								<th>play</th>
								<td><input value="play" type="button" class="play" /></td>
							</tr>
							<tr>
								<th>pause</th>
								<td><input value="pause" type="button" class="pause" /></td>
							</tr>
							<tr>
								<th>muted</th>
								<td><input class="muted" type="checkbox" /></td>
							</tr>
							<tr>
								<th>volume</th>
								<td><input class="volume-slider" type="range"  value="1" max="1" step="0.01" /></td>
							</tr>
						</tbody>
					</table>
				</div>
			</section>
			
			<section>
				<h2>How to...</h2>
				<h3>Playing <abbr title="HTTP Live Streams">HLS</abbr>/<abbr title="Real Time Messaging Protocol">RTMP</abbr> Streams</h3>
<code class="block">
&lt;video poster="poster.jpg"&gt;
	&lt;!-- Mac OS / iOS HLS Streaming --&gt;
	&lt;source src="http://server.com/path/file.m3u8" type="application/x-mpegURL" /&gt;
	&lt;!-- rtmp streaming: using the data-server attribute --&gt;
	&lt;source data-server="rtmp://server.com/path/" src="file.mp4" type="video/rtmp" /&gt;
	&lt;!-- rtmp streaming: using an identifier (i.e.: mp4:) --&gt;
	&lt;source src="rtmp://server.com/path/identifier:file.mp4" type="video/rtmp" /&gt;
&lt;/video&gt;
</code>

				<h3>Styling the video/audio elements</h3>
				<h4>Setting dimensions</h4>
				<p>If an width-/height- inline style is used, these properties are taken. In this case also % or em units and the auto keyword are fully supported. If styles are set through an stylesheet, webshims lib will use the computed styles (always px units).</p>
				
				<h4>Using additional styles (margin, background, float etc.)</h4>
				<p>Additional styles like margin, float etc. are not transferred from the audio/video element to the flash-fallback. The best way to use margin, float and other styles is to use an additional wrapper for your mediaelement.</p>

				<h4>Using custom styleable controls</h4>
				<p>Webshims lib does not provide custom styleable controls out of the box. Instead webshims lib polyfills the HTML5 API, so that you can easily build your own controls. Simply have a look into the source code of this site, to see how we have build the controls in our demo. If you are interested in a ready-to-use solution for CSS styleable controls, try <a href="https://github.com/aFarkas/jMediaelement">JME2</a>. JME2 works in all HTML5 browsers without a polyfill and in all browsers including IE6 in conjunction with webshims lib.</p>
				
				<p>See also our <a href="mediaelement/responsive-mediaelement.html">responsive/custom styleable Mediaplayer example</a></p>
				<h2>Cookbook</h2>
				
				<h3>Stop other media if media starts to play</h3>
<code class="block">
$(document).bind('play', function(e){
	$('audio, video').not(e.target).pause();
});
</code>
				<h3>Make a simple playlist</h3>
<code class="block">
&lt;video src="video-1.mp4" data-palylist='["video-2.mp4", "video-3.mp4"]' controls="controls"&gt;&lt;/video&gt;
</code>
<code class="block">
//get all audio and video files 
$('video, audio')
	//with a playlist
	.filter('[data-playlist]')
	.each(function(){
		//get the playlist array form the data-attribute
		var playlist = $(this).data('playlist');
		//put first source into the playlist array 
		playlist.unshift( $.prop(this, 'src') );
		//remember index
		var index = 0;
		
		//if media ends playing..
		$(this).bind('ended', function(){
			// get next index
			index++;
			//if there is no source, we loop to first index
			if(!playlist[index]){
				index = 0;
			}
			$(this)
				//renew source elements and call load-method
				.loadMediaSrc(playlist[index])
				//start playing
				.play()
			;
		});
	})
;	
</code>
			</section>
			
			<aside>
				<h3>Simple demos/cookbook</h3>
				<ul>
					<li><a href="http://jsfiddle.net/trixta/VvmmC/">Player with some custom controls using input[type="range"]</a></li>
					<li><a href="http://jsfiddle.net/trixta/QZJTM/">Working with the TextTrack API</a></li>
				</ul>
			</aside>
				
			<aside>
				<h3>Links about mediaelements</h3>
				
				<ul>
					<li><a href="http://diveintohtml5.info/video.html">Video (Dive Into HTML5)</a></li>
				</ul>
				
			</aside>		
	</section>
	</div>
	</div>
	<footer>		
		<small>
			<strong>Note</strong>: every polyfill is a hack! innovative frontend development is hacky and always will be hacky!
		</small>
	</footer>
<!--[if lte IE 7]>
	<div class="browser-support"> 			
		<div class="browser-support-box"> 				
			Webshims Lib really cares about cross browser support and supports all A-Graded Browsers including IE6 and newest Opera. But I don't care about Styling/Layout issues in IE7- on this demo page.
		</div> 		
	</div>
<![endif]-->
</body>
</html>   
